<!DOCTYPE html>
<html>
	<head>
		<title>数据查询</title>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css">
		
		<script src="../../static/kj/vue.min.js"></script>
		<script src="../../static/kj/axios.min.js"></script>
		<script src="../../static/kj/element-ui/index.js"></script>
		<script src="../../static/kj/jquery.min.js"></script>
		<script src="../../static/kj/layer/layer.js"></script>

		<script src="../../static/sa.js"></script>
		<script src="../../sa-resources/config.js"></script>

		<style type="text/css">
			.demo-table-expand {
				font-size: 0;
			}

			.demo-table-expand label {
				width: 90px;
				color: #99a9bf;
			}

			.demo-table-expand .el-form-item {
				margin-right: 0;
				margin-bottom: 0;
				width: 100%;
				border-bottom: 1px #eeeeee solid;
			}
			
			.el-tooltip__popper {
				max-width: 30%
			}
		</style>
	</head>
	<body>
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<div class="c-panel">
				<!-- ------------- 参数栏 ------------- -->
				<div class="c-title">检索参数</div>
				<el-form>
					<div class="c-item">
						<label class="c-label">关键词：</label>
						<el-input size="mini" v-model="queryParams[0].right[0]" placeholder="如数据录入 学校 开放"></el-input>
					</div>
					<div class="c-item">
						<label class="c-label">审核状态：</label>
						<el-select size="mini" v-model="queryParams[1].right[0]" placeholder="请选择">
							<el-option label="全部" value=""></el-option>
							<el-option v-for="(item, index) in cfgStatusArray" :key="index" :label="item.value"
								:value="item.key">
							</el-option>
						</el-select>
					</div>
					
					<!-- 预定义检索参数 -->
					<div class="c-item" v-for="(item, index) in defaultQueryParams">
						<label class="c-label">{{item.label}}：</label>
						<div style="display: inline-block;" v-if="item.tag == 'el-input-number'">
							<el-input size="mini" v-model="item.right[0]" placeholder="最小值" style="width: 70px;">
							</el-input>
							<span>-</span>
							<el-input size="mini" v-model="item.right[1]" placeholder="最大值" style="width: 70px;">
							</el-input>
						</div>
						
						<!-- 选择器 -->
						<el-select size="mini" v-model="item.right[0]" v-else-if="item.tag == 'el-select'">
							<el-option v-for="(option, optionsIndex) in item.field.__slot__.options" :key="'options-' + optionsIndex" :label="option.label" :value="option.value" :disabled="option.disabled"></el-option>
						</el-select>
					
						<el-input v-else size="mini" v-model="item.right[0]" placeholder=""></el-input>
					</div>

					<div class="c-item" style="min-width: 0px;">
						<el-button size="mini" type="primary" icon="el-icon-search" @click="params.page = 1; f5()">查询
						</el-button>
					</div>
				</el-form>

				<!-- ------------- 快捷按钮 ------------- -->
				<div class="fast-btn">
					<el-button size="mini" type="info" icon="el-icon-refresh" @click="sa.f5()">重置</el-button>
				</div>

				<!-- ------------- 数据列表 ------------- -->
				<el-table :data="dataList" size="small" ref="data-table" class="wuyan-table" max-height="600"
					@row-click="handleRowChange" highlight-current-row :empty-text="firstSearch ? '请先选择条件并点击查询' : '暂无数据'">
					<el-table-column type="expand">
						<template slot-scope="props">
							<el-form label-position="left" inline class="demo-table-expand">
								<el-row style="height:100%">
									<el-col v-for="(item, index) in formData.fields" :key="'expand-' + index" :md="24"
										:lg="12">
										<el-form-item :label="item.__config__.label"
											v-if="!item.__config__.queryMainShow"
											:label-width="item.__config__.labelWidth ? item.__config__.labelWidth : '150px'">
											<span>{{ props.row[item.__vModel__] }}</span>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</template>
					</el-table-column>

					<el-table-column align="center" type="selection" width="45px"></el-table-column>

					<el-table-column type="index" align="center" label="序号" width="50"></el-table-column>

					<el-table-column align="center" label="录入员" prop="creator_name"></el-table-column>

					<el-table-column v-for="(item, index) in formData.fields" :key="'main-' + index" align="center" :width="item.type == 'textarea' ? '200px' : '100px'" :show-overflow-tooltip="true"
						:label="item.__config__.label" :prop="item.__vModel__" v-if="item.__config__.queryMainShow">
						<template slot-scope="s">
							<!-- 附件操作 -->
							<el-button v-if="item.__config__.tag == 'el-upload' && s.row[item.__vModel__]" class="c-btn"
								type="warm" size="mini" @click.stop="showFile(s.row[item.__vModel__])">
								查看附件
							</el-button>
							<!-- 其它 -->
							<span
								v-else>{{s.row[item.__vModel__] instanceof Array ? s.row[item.__vModel__].join(',') : s.row[item.__vModel__]}}</span>
						</template>
					</el-table-column>
					
					<el-table-column align="center" :formatter="getCfgStatusValue" label="审核状态" prop="cfg_status">
					</el-table-column>
					
					<el-table-column align="center" label="创建时间" prop="create_time">
						<template slot-scope="s">
							<span>{{timestampToTime(s.row.create_time)}}</span>
						</template>
					</el-table-column>

					<el-table-column align="center" label="更新时间" prop="operate_time">
						<template slot-scope="s">
							<span>{{timestampToTime(s.row.operate_time)}}</span>
						</template>
					</el-table-column>
				</el-table>

				<!-- ------------- 分页 ------------- -->
				<div class="page-box">
					<el-pagination background layout="total, prev, pager, next, sizes, jumper"
						:current-page.sync="params.page" :page-size.sync="params.limit" :total="dataCount"
						:page-sizes="[15,30,50,100,500,1000]" @current-change="f5()" @size-change="f5()">
					</el-pagination>
				</div>
			</div>
		
			<!-- 附件列表 -->
			<el-dialog style="height: 100%;" title="附件列表" :visible.sync="dialogFileVisible" width="80%" top="10vh"
				@close="dialogFileClose">
				<el-card>
					<div v-for="(item, index) in chooseData.files" :key="index" style="margin: 5px;">
						<el-row style="height: 30px;line-height: 30px;">
							<el-col :span="18">
								{{item.name}}
							</el-col>
							<el-col :span="6" style="text-align: right;">
								<el-button size="mini" type="warm" @click.stop="window.open(item.url)">查看</el-button>
							</el-col>
						</el-row>
					</div>
				</el-card>
			</el-dialog>
		</div>

		<script src="../../sa-resources/api.js"></script>
		<script src="../../sa-resources/wuyan.js"></script>
		<script src="../../sa-resources/element-ui-helper.js"></script>

		<script>
			var app = new Vue({
				el: '.vue-box',
				data: {
					// 表单ID
					formId: parseInt(sa.p('id', 0)),
					// 表单数据
					formData: {},
					// 请求参数  
					params: {
						params: '',
						page: 1,
						limit: 15
					},
					// 查询参数
					queryParams: [{
							left: 'cfg_tags',
							op: 'text',
							right: ['']
						},
						{
							left: 'cfg_status',
							op: 'eq',
							right: ['']
						},
					],
					// 预定义查询参数
					defaultQueryParams: [],
					// 当前数据
					dataList: [],
					// 数据量
					dataCount: 0,
					// 选中参数
					chooseData: {
						row: null,
						field: null,
						fieldLabel: null,
						fieldValue: null,
						index: null,
						files: null
					},
					cfgStatusArray: [],
					firstSearch: true,
					dialogFileVisible: false,
				},
				created: function() {
					this.init();
				},
				methods: {
					// 初始化
					init() {
						axiosConfig(axios)
						this.cfgStatusArray = this.convertCfgStatus2Array()

						let loading = elLoadding({
							that: this
						})

						let url = getUrl('pub-form', 'getOne', [this.formId])
						let http = getHttp(axios, 'pub-form', 'getOne')
						http(url, {}).then(res => {
							res.fields = JSON.parse(res.fields)
							this.formData = res
							
							// 预定义检索参数
							this.defaultQueryParams = queryConfig2List(res.fields)
							
							sa.onInputEnter(); // 监听输入框的回车事件，执行查询  
							loading.close();
						}).catch((err) => { // 请求失败处理
							sa.error(err.msg);
							loading.close();
						});
					},

					// 刷新
					f5: function() {
						this.firstSearch = false
						
						let query = this.queryParams.concat(this.defaultQueryParams)
						this.params.params = queryParamsToJsonStr(query)

						let loading = elLoadding({
							that: this
						})

						axios.get('/form/api/' + this.formData.formRef, {
								params: this.params
							})
							.then(res => {
								this.dataList = res.list ? res.list : []; // 数据
								this.dataCount = res.count; // 分页
								sa.f5TableHeight(); // 刷新表格高度 

								loading.close();
							})
							.catch((err) => { // 请求失败处理
								this.$notify.info({
									title: '消息',
									message: '初始化数据失败'
								});

								loading.close();
							});
					},

					// 获取状态标识的含义
					getCfgStatusValue: function(data, column) {
						let res = baseConfig.formData.cfgStatus[data['cfg_status']]
						return res ? res : '未提交'
					},

					// 行单击事件
					handleRowChange(row, event, column) {
						this.$refs['data-table'].toggleRowExpansion(row)
					},

					// 将json格式的配置转化为数组
					convertCfgStatus2Array() {
						let res = []
						for (let key in baseConfig.formData.cfgStatus) {
							let item = {
								key: key,
								value: baseConfig.formData.cfgStatus[key]
							}
							res.push(item)
						}

						return res
					},
					
					// 展示附件
					showFile(files) {
						this.chooseData.files = files
						this.dialogFileVisible = true
					},
					
					dialogFileClose() {
						this.dialogFileVisible = false
					},
				}
			})
		</script>
	</body>
</html>
